<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" th:href="@{/css/bootstrap.css}">-->

    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/jquery/3.6.3/jquery.js"></script>

</head>
<body class="p-0 m-0">

<div>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" th:href="@{'/ziroom_portal/production/productionList'}">首页</a>

        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link active" th:if="${!#strings.isEmpty(session.userInfo)}" th:href="@{'/ziroom_portal/user/logout'}">退出</a>
            </li>
        </ul>

    </nav>
</div>
<p/>

<div class="container">
    <div>
        <h3 class="text-center bg-info p-3 m-3 text-white">购物车</h3>
    </div>

    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">
                    <input type="checkbox" id="selectAll">
                </th>
                <th scope="col"></th>
                <th scope="col">商品</th>
                <th scope="col">图片</th>
                <th scope="col">单价</th>
                <th scope="col">数量</th>
                <th scope="col">小计</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="cartItem,cartItemStat:${cartItemList}">
                <td>
                    <input type="checkbox" class="selectItem" th:data-id="${cartItem.productionVo.productionId}" th:data-sub-total="${cartItem.subTotal}">
                </td>
                <td>
                    <input hidden="hidden" id="productionId" th:value="${cartItem.productionVo.productionId}">
                </td>
                <td th:text="${cartItem.productionVo.productionName}"></td>
                <td>
                    <img  th:each="i,imageStat:${cartItem.productionVo.imageList}"  th:if="${imageStat.index == 0}" th:src="${i.imageUrl}"
                          style="width: 30px ; height: 40px"
                          th:alt="cartItem.productionVo.productionIntroduction">
                </td>
                <td th:text="${cartItem.productionVo.productionPrice}"></td>
                <td>
                    <input id="buyCount" type="number" th:value="${cartItem.buyCount}">
                </td>
                <td th:text="${cartItem.subTotal}"></td>
                <td>
                    <button class="btn btn-danger" th:onclick="deleteById([[${cartItem.productionVo.productionId}]])">删除</button>
                </td>
            </tr>
            <tr>
                <td>合计: </td>
                <td colspan="5">
                    ￥: <span id="total" style="color: red">XXX</span>
                </td>
                <td>
                    <button id="calcTotal"  class="btn btn-success" >结算</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script th:src="@{/js/jquery-3.6.3.js}"></script>
<script>
    $(function(){

        let checked = $("input[type='checkbox']:checked").length
        if (checked == 0){
            $("#calcTotal").attr("disabled",true)
        }


        $("#selectAll").change(function () {
           $(".selectItem").prop("checked",$(this).prop("checked"))
        })
        
        $(".selectItem").click(function () {
            if ($(".selectItem:checked").length == $(".selectItem").length){
                $("#selectAll").prop("checked",true);
            }else {
                $("#selectAll").prop("checked",false);
            }
        })

        $("#calcTotal").click(function () {
            let ids = [];
            let total = $("#total").html();

            $.each($(".selectItem:checked"),function (index,element) {
                ids.push($(element).attr("data-id"))
            })

            location.href="/ziroom_portal/order/goToOrder?total=" + total + "&productionIds=" + ids;
        })

        $(".selectItem").click(function (){
            total = 0;

            //-- 当checkbox选中时 获取选中的checkbox并得到绑定的私有属性：小计累加求和并写入合计
            $.each($(".selectItem:checked"),function (index,element) {
                total += parseFloat($(element).attr("data-sub-total"));
                console.log(total)
            })
            $("#total").text(total)

            let checked = $("input[type='checkbox']:checked").length
            if (checked == 0){
                $("#calcTotal").attr("disabled",true)
            }else{
                $("#calcTotal").attr("disabled",false)
            }
        })

        $("#buyCount").change(function() {
            let buyCount = $("#buyCount").val();
            let productionId = $("#productionId").val();
            console.log('buyCount------->'+buyCount);
            console.log('productionId-------->'+productionId);
            $.ajax({
                type: "get",
                url: "/ziroom_portal/cart/changeBuyCount?buyCount="+buyCount+"&productionId="+productionId,
                success: function (result){
                    if (result == 'ok'){
                        location.href="/ziroom_portal/cart/userCart";
                    }else if (result == 'no'){
                        alert("请正确输入购买数量!")
                    }
                }
            })
        })

    })

    function deleteById(productionId){
        $.ajax({
            type: "get",
            url: "/ziroom_portal/cart/deleteByProductionId?productionId="+productionId,
            success: function (result){
                if (result == 'no'){
                    alert("请先登录!");
                    location.href="/ziroom_portal/user/login";
                }else if (result == 'ok') {
                    alert("删除成功!");
                    location.href="/ziroom_portal/cart/userCart";
                }
            }
        })
    }


</script>
</body>
</html>